<template>
	<!-- 图片预览组件 -->
	<div style="min-width: 60px">
		<!-- :style="`width:${width}px;height:${height}px;`" class="wrapper" -->
		<a @click="aClick">查看图片</a>
		<div v-show="false">
			<viewer ref="viewerComponent" :images="imageList" @inited="inited">
				<img v-for="(item, index) in imageList" :key="index" class="preview-img" @click="imageClcik(item)"
					:style="`width:${width}px;height:${height}px;`"
					:src="`${$store.state.baseUrl}/sysFileInfo/preview?id=${item}`" />
			</viewer>
		</div>
		<!-- <div style="background-color: #fff;position: relative;z-index: 999999;top: 50%;width: 100px;height: 100px;">
			<a>下载</a>
		</div> -->
		<!-- <div v-if="images">
			<div>
				<viewer >
					<img v-show="index == 0" v-for="(item, index) in images.split(',')" :key="index" class="preview-img"
						:style="`width:${width}px;height:${height}px;`"
						:src="`${$store.state.baseUrl}/sysFileInfo/preview?id=${item}`" />
				</viewer>
			</div>
		</div>
		<div v-else style="text-align: center;background-color: #eee;user-select: none;"
			:style="{ 'line-height': width + 'px' }">暂无</div> -->
	</div>
</template>
<script>
// import Viewer from 'v-viewer'
// import 'viewerjs/dist/viewer.css'
import { sysFileInfoDownload } from '@/api/modular/system/fileManage'

export default {
	name: 'UploadImageMore',
	props: {
		images: { type: String, default: '' },  //图片url地址，是以逗号分隔的id
		width: { type: [Number, String], default: "45" },
		height: { type: [Number, String], default: "45" },
	},
	data() {
		return {
			$viewer: null,
			imageList: [],
		}
	},
	mounted() {
		// new Viewer(this.$refs.imageContainer, {
		// 	// Viewer.js 的选项
		// });
	},
	methods: {
		inited(viewer) {
			this.$viewer = viewer
		},
		imageClcik(item) {
			console.log(item);

		},
		
		aClick() {
			this.imageList = [];
			this.images.split(",").forEach(val => {
				this.imageList.push(val);
				// this.sysFileInfoDownload(val)
			})
			this.$refs.viewerComponent.$viewer.show()
		}
	}
}
</script>

<style scoped lang="less">
.wrapper {
	overflow: hidden;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.preview-img {
	transition: all 0.4s;

	&:hover {
		transform: scale(1.3);
	}
}
</style>